import React, { useState } from'react';
import { Calendar, Button } from 'antd-mobile';
import { ToastContainer, toast } from'react-toastify';
import'react-toastify/dist/ReactToastify.css';
import { useNavigate } from 'react-router-dom';

const SignInCalendar = () => {
    const navigate = useNavigate();
    const [signInRecords, setSignInRecords] = useState([]);
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();

    const getDaysInMonth = (year, month) => {
        return new Date(year, month + 1, 0).getDate();
    };


    const isSignedIn = (date) => {
        return signInRecords.includes(date);
    };

    const handleSignIn = (date) => {
        if (!isSignedIn(date)) {
            setSignInRecords([...signInRecords, date]);
            toast.success('签到成功！');
        } else {
            toast.warning('今日已签到！');
        }
    };

    const dateRender = (date) => {
        const dateStr = `${date.year}-${date.month + 1}-${date.date}`;
        const isCurrentMonth = date.month === currentMonth;
        const isSigned = isSignedIn(dateStr);
        return (
            <div
                onClick={() => handleSignIn(dateStr)}
                style={{
                    backgroundColor: isSigned? 'lightgreen' : 'white',
                    border: '1px solid gray',
                    borderRadius: '50%',
                    width: '30px',
                    height: '30px',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    cursor: 'pointer'
                }}
            >
                {isCurrentMonth && <span>{date.date}</span>}
            </div>
        );
    };
    

    return (
        <div>
            <h2></h2>
            <h2 onClick={()=>navigate('/shou')}>每日签到</h2>
            <Calendar dateRender={dateRender} />
            <div>
                <Button type="primary" onClick={() => handleSignIn(`${currentYear}-${currentMonth + 1}-${currentDate.getDate()}`)}style={{
                    marginTop: '20px',
                    marginBottom: '20px',
                    marginLeft: '130px',
                }}>点击签到</Button>
                {isSignedIn(`${currentYear}-${currentMonth + 1}-${currentDate.getDate()}`)? <p style={{
                    marginTop: '20px',
                    marginBottom: '20px',
                    marginLeft: '140px',
                }}>今日已签到</p> : <p>今日未签到</p>}
            </div>
            <ToastContainer />
        </div>
    );
};

export default SignInCalendar;